<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <!-- css公共样式 -->
  <link rel="stylesheet" href="../../common/css/main.css">
  <!-- element-ui样式 -->
  <link rel="stylesheet" href="../../common/css/elementui.css">
</head>
<style>
  #app {
    height: 3000px;
    position: relative;
  }

  .fie {
    position: absolute;
    bottom: 200px;
    right: 200px;
    width: 100px;
    height: 40px;
    line-height: 40px;
    background: skyblue;
    z-index: 1000;
  }

</style>
<body>
  <div id="app">
    <div>{{name}}</div>
    <br />
    <form action="" id="myform" method="post">
      姓名：<input type="text" name="username"><br /><br />
      密码：<input type="password" name="password"><br /><br />
      提交：<input type="submit" value="提交" @click="getSubmitFormData"><br />
    </form>

    <button class="fie">固定</button>
  </div>
  <script src="../../common/js/vue.main.js"></script> <!--vue-->
  <script src="../../common/js/vuex.main.js"></script> <!--vuex-->
  <script src="../../common/js/vue-router.main.js"></script> <!--vue-router-->
  <script src="../../common/js/element-ui.main.js"></script> <!--elemnt-ui-->
  <script>

    let app = new Vue({
      el: "#app",
      components: {},
      props: {},
      data: () => {
        return {
          name: "formData"
        }
      },
      computed: {},
      watch: {},
      created() {},
      mounted() {},
      methods: {
        getSubmitFormData(e) {
          e.preventDefault() //阻止默认事件

          let myform = document.getElementById("myform");

          let formData = new FormData(myform) //创建表单容器，存储form数据

          console.log("formData", formData);
          console.log("username", formData.get("username"));

          formData.append("username", "caicai")
          formData.append("username", "xiaoming")

          console.log("username", formData.getAll("username"));
        }
      },
    })

  </script>
</body>
</html>